<template>
  <div class="rsgx-table-page">
    <el-card>
      <div slot="header" class="clearfix">
        <span>重要关系</span>
      </div>
      <div class="filter-bar">
        <el-input v-model="filters.name" placeholder="姓名" style="width: 120px; margin-right: 10px;" clearable />
        <el-select v-model="filters.gender" placeholder="性别" style="width: 100px; margin-right: 10px;" clearable>
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
        <el-date-picker v-model="filters.birth" type="date" placeholder="出生日期" style="width: 150px; margin-right: 10px;" clearable />
        <el-input v-model="filters.relation" placeholder="关系" style="width: 120px; margin-right: 10px;" clearable />
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </div>
      <el-table :data="pagedData" border stripe style="width: 100%; margin-top: 15px;">
        <el-table-column prop="photo" label="照片" width="80">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.photo" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="80" />
        <el-table-column prop="birth" label="出生日期" width="120" />
        <el-table-column prop="death" label="死亡日期" width="120" />
        <el-table-column prop="birthplace" label="出生地" width="120" />
        <el-table-column prop="relation" label="关系" width="100" />
        <el-table-column prop="keyNode" label="关键节点" width="150" />
        <el-table-column prop="contact" label="联系方式" width="140" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <div style="margin-top: 15px; text-align: right;">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="filteredData.length"
          :page-size="pageSize"
          :current-page.sync="currentPage"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
const mockPhotos = [
  'https://randomuser.me/api/portraits/men/1.jpg',
  'https://randomuser.me/api/portraits/women/2.jpg',
  'https://randomuser.me/api/portraits/men/3.jpg',
  'https://randomuser.me/api/portraits/women/4.jpg',
];
export default {
  name: 'RsgxZygxView',
  data() {
    return {
      filters: { name: '', gender: '', birth: '', relation: '' },
      currentPage: 1,
      pageSize: 2,
      tableData: [
        { name: '李明', gender: '男', birth: '1980-05-12', death: '', birthplace: '北京', relation: '父亲', keyNode: '高考、结婚', contact: '138****1234', remark: '家庭支柱', photo: mockPhotos[0] },
        { name: '王芳', gender: '女', birth: '1982-08-23', death: '', birthplace: '上海', relation: '母亲', keyNode: '生育、退休', contact: '139****5678', remark: '温柔体贴', photo: mockPhotos[1] },
        { name: '张伟', gender: '男', birth: '2005-03-15', death: '', birthplace: '北京', relation: '儿子', keyNode: '出生、大学', contact: '137****8888', remark: '阳光开朗', photo: mockPhotos[2] },
        { name: '赵丽', gender: '女', birth: '2008-11-02', death: '', birthplace: '北京', relation: '女儿', keyNode: '出生、小学', contact: '136****9999', remark: '活泼可爱', photo: mockPhotos[3] },
      ]
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(row => {
        const nameMatch = !this.filters.name || row.name.includes(this.filters.name);
        const genderMatch = !this.filters.gender || row.gender === this.filters.gender;
        const birthMatch = !this.filters.birth || row.birth === this.filters.birth;
        const relationMatch = !this.filters.relation || row.relation.includes(this.filters.relation);
        return nameMatch && genderMatch && birthMatch && relationMatch;
      });
    },
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handleFilter() {
      this.currentPage = 1;
    },
    resetFilter() {
      this.filters = { name: '', gender: '', birth: '', relation: '' };
      this.currentPage = 1;
    }
  }
}
</script>
<style scoped>
/* .rsgx-table-page { padding: 30px; } */
.filter-bar { margin-bottom: 10px; }
.el-card {
  box-shadow: 0 2px 6px rgba(74,158,255,0.04) !important;
}
.el-table {
  box-shadow: none !important;
}
</style> 